<template>
    <div class="app-container calendar-list-container">
      <div class="bg-cust-title">平台基础信息：</div>
      <div class="bg-cust-detail">
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">平台编号: {{ platformBaseInfo.platformId }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">平台名称: {{ platformBaseInfo.platformName }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">平台登录名称: {{ platformBaseInfo.platformLoginName }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple">平台简介: {{ platformBaseInfo.platformIntroduction }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">认证状态: 
            <span v-if="platformBaseInfo.authenticationStatus == '00'">未认证</span>
            <span v-if="platformBaseInfo.authenticationStatus == '01'">无需认证</span>
            <span v-if="platformBaseInfo.authenticationStatus == '02'">认证成功</span>
            <span v-if="platformBaseInfo.authenticationStatus == '03'">认证失败</span></div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">最后操作人编号: {{ platformBaseInfo.operatorId }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple">最后操作人名称: {{ platformBaseInfo.operatorName }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">创建时间: {{ platformBaseInfo.createTime }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">更新时间: {{ platformBaseInfo.updateTime }}</div></el-col>
        </el-row>
      </div>
      <div class="bg-cust-title">平台扩展信息：</div>
      <div class="bg-cust-detail">
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">平台编号: {{ platformBaseExtend.platformId }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">企业名称: {{ platformBaseExtend.companyName }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">经营范围: {{ platformBaseExtend.businessScope }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">工商注册号: {{ platformBaseExtend.businessNo }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">法人姓名: {{ platformBaseExtend.legalPersonName }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">法人证件类型: 
            <span v-if="platformBaseExtend.legalPersonCredType === '0'">身份证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '1'">户口本</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '2'">护照</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '3'">军官证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '4'">士兵证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '5'">港澳居民往来内地通行证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '6'">台湾通报往来内地通行证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '7'">临时身份证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '8'">外国人居留证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === '9'">警官证</span>
            <span v-if="platformBaseExtend.legalPersonCredType === 'x'">其他证件</span></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">法人证件号码: {{ platformBaseExtend.legalPersonCredNo }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">营业执照: {{ platformBaseExtend.businessLicence }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">联系电话: {{ platformBaseExtend.phone }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">企业座机: {{ platformBaseExtend.mobile }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">企业传真: {{ platformBaseExtend.fax }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">企业网址: {{ platformBaseExtend.httpAddress }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">注册资金: {{ platformBaseExtend.registeredCapital }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">企业地址: {{ platformBaseExtend.companyAddress }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">最后操作人编号: {{ platformBaseExtend.operatorId }}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple-light">最后操作人名称: {{ platformBaseExtend.operatorName }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">创建时间: {{ platformBaseExtend.createTime }}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">更新时间: {{ platformBaseExtend.updateTime }}</div></el-col>
        </el-row>
      </div>

      <div class="tableContent">
        <div class="bg-cust-title">平台账户信息</div>
        <div class="bg-cust-detail">
          <el-row  v-for="(item, index) in platformAccounts" :key="index">
            <el-col :span="6"><div class="grid-content bg-purple-light">账户编号: {{ item.accountId }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">账户类型: 
                <span v-if="item.accountType === 'ACC001'">余额账户</span>
                <span v-if="item.accountType === 'ACC002'">红包账户 </span>
                <span v-if="item.accountType === 'ACC003'">积分账户 </span>
                <span v-if="item.accountType === 'ACC004'">手续费账户 </span>
                <span v-if="item.accountType === 'ACC005'">已结算账户 </span>
                <span v-if="item.accountType === 'ACC006'">交易金额账户 </span>
                <span v-if="item.accountType === 'ACC007'">冻结金额账户 </span>
                <span v-if="item.accountType === 'ACC008'">平台管理账户 </span>
                <span v-if="item.accountType === 'ACC009'">平台服务费账户 </span>
              </div>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple">账户余额: {{ item.accountBalance }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">冻结金额: {{ item.freezeBalance }}</div></el-col>
          </el-row>
        </div>
      </div>

      <div class="bg-cust-title1">平台支持账户类型 <el-button size="small" type="primary" @click="handleAddPlatformAccount">新增</el-button></div>
      <div class="bg-cust-account">
        <el-table  :data="platformAccTypeList" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="平台编号" width="400">
            <template slot-scope="scope">
              <span>{{scope.row.platformId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户类型" width="400">
            <template scope="scope">
              <span v-if="scope.row.customerType == 'CUST00'">平台</span>
              <span v-if="scope.row.customerType == 'CUST01'">商户</span>
              <span v-if="scope.row.customerType == 'CUST02'">用户</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="账户类型" width="500">
            <template scope="scope">
              <span>{{scope.row.accountType}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="账户别名" width="380">
            <template scope="scope">
              <span>{{scope.row.accountAlias}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQueryAccs.page" :page-sizes="[10,20,30, 50]" :page-size="listQueryAccs.limit" layout="total, sizes, prev, pager, next, jumper" :total="totalAccs"> </el-pagination>
        </div>
      </div>

      <div class="bg-cust-title1">安全配置 <el-button size="small" type="primary" @click="handleAddSafety">新增</el-button></div>
      <div class="bg-cust-account">
        <el-table  :data="safetyList" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="平台编号" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.platformId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="加密类型" width="150">
            <template scope="scope">
              <span v-if="scope.row.encryptionType == '00'">报文加密</span>
              <span v-if="scope.row.encryptionType == '01'">身份证加密</span>
              <span v-if="scope.row.encryptionType == '02'">银行卡加密</span>
              <span v-if="scope.row.encryptionType == '03'">登录密码加密</span>
              <span v-if="scope.row.encryptionType == '04'">支付密码加密</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="加密方式" width="150">
            <template scope="scope">
              <span>{{scope.row.encryptionMethod}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="密钥(盐值)" width="300">
            <template scope="scope">
              <span>{{scope.row.saltKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="公钥" width="300">
            <template scope="scope">
              <span>{{scope.row.publicKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="私钥" width="300">
            <template scope="scope">
              <span>{{scope.row.privateKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="280">
            <template scope="scope">
              <el-button type="primary" size="small" @click="handleUpdateSafety(scope.row)">修改</el-button>
              <el-button type="primary" size="small" @click="handleDeleteSafety(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery1.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery1.limit" layout="total, sizes, prev, pager, next, jumper" :total="total1"> </el-pagination>
        </div>
      </div>

      <div class="bg-cust-title1">平台回调地址配置 <el-button size="small" type="primary" @click="handleAddCallBack">新增</el-button></div>
      <div class="bg-cust-account">
        <el-table  :data="callBackList" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="平台编号" width="400">
            <template slot-scope="scope">
              <span>{{scope.row.platformId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="回调类型" width="400">
            <template scope="scope">
              <span v-if="scope.row.callbackType == '00'">支付回调</span>
              <span v-if="scope.row.callbackType == '01'">退款回调</span>
              <span v-if="scope.row.callbackType == '02'">消息通知</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="回调地址" width="500">
            <template scope="scope">
              <span>{{scope.row.callbackUrl}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="380">
            <template scope="scope">
              <el-button type="primary" size="small" @click="handleUpdateCallBack(scope.row)">修改</el-button>
              <el-button type="primary" size="small" @click="handleDeleteCallBack(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery2.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery2.limit" layout="total, sizes, prev, pager, next, jumper" :total="total2"> </el-pagination>
        </div>
      </div>

      <div class="bg-cust-title1">平台通道配置 <el-button size="small" type="primary" @click="handleAddPayConfig">新增</el-button></div>
      <div class="bg-cust-account">
        <el-table  :data="payChannelList" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="平台编号" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.platformId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付通道编号" width="200">
            <template scope="scope">
              <span>{{scope.row.payChannelNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付通道名称" width="200">
            <template scope="scope">
              <span>{{scope.row.payChannelName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付公司编号" width="200">
            <template scope="scope">
              <span>{{scope.row.payCompanyNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户类型" width="200">
            <template scope="scope">
              <span v-if="scope.row.customerType == 'CUST00'">平台</span>
              <span v-if="scope.row.customerType == 'CUST01'">商户</span>
              <span v-if="scope.row.customerType == 'CUST02'">用户</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="费率代码" width="200">
            <template scope="scope">
              <span>{{scope.row.feeCode}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方商户号 APPID" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方子商户号" width="200">
            <template scope="scope">
              <span>{{scope.row.outSubMerNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方账号" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerAccount}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方公钥" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerPublicKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="第三方私钥" width="200">
            <template scope="scope">
              <span>{{scope.row.outMerPrivateKey}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="加密方式" width="200">
            <template scope="scope">
              <span>{{scope.row.encryptionMethod}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="证书地址" width="200">
            <template scope="scope">
              <span>{{scope.row.keyPath}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="证书密码" width="200">
            <template scope="scope">
              <span>{{scope.row.keyPwd}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="费率代码" width="200">
            <template scope="scope">
              <span>{{scope.row.feeCode}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="200">
            <template scope="scope">
              <span v-if="scope.row.status == '0'">开启</span>
              <span v-if="scope.row.status == '1'">关闭</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300">
            <template scope="scope">
              <el-button type="primary" size="small" @click="handleUpdatePay(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.status == '1'" type="primary" size="small" @click="handleOpen(scope.row)">启用</el-button>
              <el-button v-if="scope.row.status == '0'" type="primary" size="small" @click="handleClose(scope.row)">关闭</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery4.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery4.limit" layout="total, sizes, prev, pager, next, jumper" :total="total4"> </el-pagination>
        </div>
      </div>


      <!-- 平台账户配置 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddAccountConfig">
        <el-form :rules="ruleAccounts" ref="platformAccountForm" :model="platformAccountForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
          <el-form-item label="平台编号: " prop="platformId">
            <el-input v-model="platformAccountForm.platformId" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="客户类型： " prop="customerType" >
            <el-select class="filter-item" v-model="platformAccountForm.customerType" placeholder="请选择" clearable="">
              <el-option label="平台" value="CUST00"> </el-option>
              <el-option label="商户" value="CUST01"> </el-option>
              <el-option label="用户" value="CUST02"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账户类型： " prop="accountType" >
            <el-select v-model="platformAccountForm.accountType" placeholder="请选择" @change="changeValue" clearable="">
              <el-option v-for="item in dictList" :key="item.code" :label="item.value" :value="item.code">
              </el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="账户别名: " prop="accountAlias">
            <el-input v-model="platformAccountForm.accountAlias"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddAccountConfig = false">取消</el-button>
          <el-button v-if="dialogStatus === 'create'" type="primary" @click="createAccountConfig('platformAccountForm')">保存</el-button>
          <el-button v-if="dialogStatus === 'update'" type="primary" @click="updateAccountConfig('platformAccountForm')">保存</el-button>
        </div>
      </el-dialog>

        <!-- 安全配置 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddSafetyConfig">
            <el-form :rules="rule1" ref="safetyForm" :model="safetyForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
                <el-form-item label="平台编号: " prop="platformId">
                    <el-input v-model="safetyForm.platformId" disabled=""></el-input>
                </el-form-item>
                <el-form-item label="加密类型： " prop="encryptionType" >
                    <el-select class="filter-item" v-model="safetyForm.encryptionType" placeholder="请选择" clearable="">
                        <el-option label="报文加密" value="00"> </el-option>
                        <el-option label="身份证加密" value="01"> </el-option>
                        <el-option label="银行卡加密" value="02"> </el-option>
                        <el-option label="登录密码加密" value="03"> </el-option>
                        <el-option label="支付密码加密" value="04"> </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="加密方式： " prop="encryptionMethod" >
                    <el-select class="filter-item" v-model="safetyForm.encryptionMethod" placeholder="请选择" clearable="">
                        <el-option label="MD5" value="MD5"> </el-option>
                        <el-option label="RSA" value="RSA"> </el-option>
                        <el-option label="SHA256" value="SHA256"> </el-option>
                    </el-select>
                </el-form-item>     
                <el-form-item label="密钥（盐值）: " prop="saltKey">
                    <el-input v-model="safetyForm.saltKey"></el-input>
                </el-form-item>
                <el-form-item label="公钥 " prop="publicKey">
                    <el-input v-model="safetyForm.publicKey"></el-input>
                </el-form-item>
                <el-form-item label="私钥: " prop="privateKey">
                    <el-input v-model="safetyForm.privateKey"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddSafetyConfig = false">取消</el-button>
                <el-button v-if="dialogStatus === 'create'" type="primary" @click="createSafetyConfig('safetyForm')">保存</el-button>
                <el-button v-else-if="dialogStatus === 'update'" type="primary" @click="updateSafetyConfig('safetyForm')">保存</el-button>
            </div>
        </el-dialog>


        <!-- 回调地址配置 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddCallBack">
            <el-form :rules="rule2" ref="callBackForm" :model="callBackForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
                <el-form-item label="平台编号: " prop="platformId">
                    <el-input v-model="callBackForm.platformId" disabled=""></el-input>
                </el-form-item>
                <el-form-item label="回调类型： " prop="callbackType" >
                    <el-select class="filter-item" v-model="callBackForm.callbackType" placeholder="请选择" clearable="">
                        <el-option label="支付回调" value="00"> </el-option>
                        <el-option label="退款回调" value="01"> </el-option>
                        <el-option label="消息通知" value="02"> </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="回调地址: " prop="callbackUrl">
                    <el-input v-model="callBackForm.callbackUrl"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddCallBack = false">取消</el-button>
                <el-button v-if="dialogStatus === 'create'" type="primary" @click="createCallBackUrl('callBackForm')">保存</el-button>
                <el-button v-if="dialogStatus === 'update'" type="primary" @click="updateCallBackUrl('callBackForm')">保存</el-button>
            </div>
        </el-dialog>

        <!-- 支付通道配置 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddPayChannel">
            <el-form :rules="rule3" ref="payChannelForm" :model="payChannelForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
                <el-form-item label="平台编号: " prop="platformId">
                    <el-input v-model="payChannelForm.platformId" disabled=""></el-input>
                </el-form-item>
                <el-form-item label="支付通道名称: " prop="payChannelName">
                    <el-select v-model="payChannelForm.payChannelName" placeholder="请选择" size="small"  clearable="">
                      <el-option v-for="(p,index) in payChannels" :label="p.payChannelName" :value="p.payChannelNo+'&'+p.payChannelName+'&'+p.payCompanyNo" :key="index"></el-option>
                    </el-select> 
                </el-form-item>
                <el-form-item label="客户类型： " prop="customerType" >
                    <el-select class="filter-item" v-model="payChannelForm.customerType" placeholder="请选择" clearable="">
                        <el-option label="平台" value="CUST00"> </el-option>
                        <el-option label="商户" value="CUST01"> </el-option>
                        <el-option label="用户" value="CUST02"> </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="第三方商户号: " prop="outMerNo">
                    <el-input v-model="payChannelForm.outMerNo" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="第三方子商户号: " prop="outMerNo">
                    <el-input v-model="payChannelForm.outSubMerNo" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="第三方账号: " prop="outMerAccount">
                    <el-input v-model="payChannelForm.outMerAccount" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="第三方公钥: " prop="outMerPublicKey">
                    <el-input v-model="payChannelForm.outMerPublicKey" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="第三方私钥: " prop="outMerPrivateKey">
                    <el-input v-model="payChannelForm.outMerPrivateKey" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="证书地址: " prop="keyPath">
                    <el-input v-model="payChannelForm.keyPath" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="证书密码: " prop="keyPwd">
                    <el-input v-model="payChannelForm.keyPwd" clearable=""></el-input>
                </el-form-item>
                <el-form-item label="加密方式: " prop="encryptionMethod">
                    <el-select class="filter-item" v-model="payChannelForm.encryptionMethod" placeholder="请选择" clearable="">
                        <el-option label="MD5" value="MD5"> </el-option>
                        <el-option label="RSA" value="RSA"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="费率代码: " prop="feeCode">
                    <el-select v-model="payChannelForm.feeCode" placeholder="请选择" size="small"  clearable="">
                      <el-option v-for="(f,index) in feeList" :label="f.feeName" :value="f.feeCode" :key="index"></el-option>
                    </el-select> 
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddPayChannel = false">取消</el-button>
                <el-button v-if="dialogStatus === 'create'" type="primary" @click="createPayChannelConfig('payChannelForm')">保存</el-button>
                <el-button v-if="dialogStatus === 'update'" type="primary" @click="updatePayChannelConfig('payChannelForm')">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { pagePayChannelConfig, getPlatformExtend, pageSafetyConfig, addSafetyConfig,
  addPayChannelConfig, updatePayChannelConfig, updateSafetyConfig, deleteSafetyConfig,
  deleteCallBackUrl, updateCallBackUrl, addCallBackUrl, pageCallBackUrl, getPlatformAccs,
  addPlatformAcc, getAccountTypes, getPlatformAccounts } from '@/api/crm/platform/index'
import { all } from '@/api/pay/channelFee'
import { mapGetters } from 'vuex'
import { allChannel } from '@/api/pay/channel'

export default {
  name: 'user',
  data() {
    return {
      platformId: '',
      platformBaseInfo: '',
      platformBaseExtend: '',
      dialogAddAccountConfig: false,
      dialogAddSafetyConfig: false,
      dialogAddCallBack: false,
      dialogAddPayChannel: false,
      payChannels: [],
      feeList: [],
      safetyList: [],
      total1: 0,
      callBackList: [],
      total2: 0,
      accountList: [],
      total3: 0,
      payChannelList: [],
      total4: 0,
      listLoading: false,
      listQuery1: {
        page: 1,
        limit: 10,
        platformId: ''
      },
      listQuery2: {
        page: 1,
        limit: 10,
        platformId: ''
      },
      listQuery4: {
        page: 1,
        limit: 10,
        platformId: '',
        merId: ''
      },
      listQueryAccs: {
        page: 1,
        limit: 10,
        platformId: ''
      },
      totalAccs: 0,
      platformAccTypeList: [],
      platformAccounts: [],
      dictList: [],
      platformAccountForm: {
        platformId: '',
        customerType: '',
        accountType: '',
        accountAlias: ''
      },
      safetyForm: {
        platformId: '',
        encryptionType: '',
        encryptionMethod: '',
        saltKey: '',
        publicKey: '',
        privateKey: ''
      },
      callBackForm: {
        platformId: '',
        callbackType: '',
        callbackUrl: ''
      },
      payChannelForm: {
        platformId: '',
        payChannelName: '',
        payChannelNameStr: '',
        payChannelNo: '',
        payCompanyNo: '',
        customerType: '',
        outMerNo: '',
        outSubMerNo: '',
        outMerAccount: '',
        outMerPublicKey: '',
        outMerPrivateKey: '',
        encryptionMethod: '',
        keyPath: '',
        keyPwd: '',
        status: '',
        feeCode: ''
      },
      rule3: {
        payChannelName: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        payChannelNameStr: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        payChannelNo: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        payCompanyNo: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        customerType: [
          {
            required: true,
            message: '请选择账户类型',
            trigger: 'blur'
          }
        ],
        outMerNo: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        outSubMerNo: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        outMerAccount: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],

        outMerPrivateKey: [
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        encryptionMethod: [
          {
            required: true,
            message: '请选择加密类型',
            trigger: 'blur'
          }
        ],
        keyPath: [
          {
            required: true,
            message: '请输入路径',
            trigger: 'blur'
          }
        ],
        keyPwd: [
          {
            required: true,
            message: '请输入秘钥',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'blur'
          }
        ]

      },
      rule2: {
        callbackType: [
          {
            required: true,
            message: '请选择加密类型',
            trigger: 'blur'
          }
        ],
        callbackUrl: [
          {
            required: true,
            message: '请输入回调地址',
            trigger: 'blur'
          }
        ]
      },
      rule1: {
        encryptionType: [
          {
            required: true,
            message: '请选择加密类型',
            trigger: 'blur'
          }
        ],
        encryptionMethod: [
          {
            required: true,
            message: '请选择加密方式',
            trigger: 'blur'
          }
        ],
        saltKey: [
          {
            required: true,
            message: '请输入盐值',
            trigger: 'blur'
          }
        ],
        publicKey: [
          {
            required: true,
            message: '请输入公钥',
            trigger: 'blur'
          }
        ],
        privateKey: [
          {
            required: true,
            message: '请输入私钥',
            trigger: 'blur'
          }
        ]
      },
      ruleAccounts: {
        platformId: [
          {
            required: true,
            message: '平台编号不能为空',
            trigger: 'blur'
          }
        ],
        customerType: [
          {
            required: true,
            message: '请选择客户类型',
            trigger: 'blur'
          }
        ],
        accountType: [
          {
            required: true,
            message: '请选择账户类型',
            trigger: 'blur'
          }
        ],
        accountAlias: [
          {
            required: true,
            message: '请输入账户别名',
            trigger: 'blur'
          }
        ]
      },
      textMap: {
        create: '创建',
        update: '编辑'
      },
      dialogStatus: ''

    }
  },
  created() {
    this.platformBaseInfo = this.$route.query.row
    this.platformId = this.$route.query.row.platformId
    this.getPlatformExtend()
    this.getSafetyList()
    this.getCallBackList()
    this.getPayChannelConfigs()
    this.getFeeList()
    this.getPlatformAccList()
    this.getAccountTypeList()
    this.getPlatformAccountList()
  },
  computed: {
    ...mapGetters([
      'elements',
      'token',
      'platformId',
      'merId'
    ])
  },
  watch: {
  },
  methods: {
    changeValue(code) {
      console.log(code)
      let obj = {}
      obj = this.dictList.find((item) => {
        return item.code === code
      })
      console.log(obj.value)
      this.platformAccountForm.accountAlias = obj.value
    },
    handleSizeChange(val) {

    },
    handleCurrentChange(val) {

    },
    handleAddPlatformAccount() {
      this.resetForm()
      this.platformAccountForm.platformId = this.platformId
      this.dialogStatus = 'create'
      this.dialogAddAccountConfig = true
    },
    handleAddSafety() {
      this.resetForm()
      this.safetyForm.platformId = this.platformId
      this.dialogStatus = 'create'
      this.dialogAddSafetyConfig = true
    },
    handleAddCallBack() {
      this.resetForm()
      this.callBackForm.platformId = this.platformId
      this.dialogStatus = 'create'
      this.dialogAddCallBack = true
    },

    handleAddPayConfig() {
      this.resetForm()
      this.payChannelForm.platformId = this.platformId
      this.dialogStatus = 'create'
      this.dialogAddPayChannel = true
      this.getPayChannels()
    },
    createPayChannelConfig(formName) {
      const set = this.$refs
      this.payChannelForm.platformId = this.platformId
      var str4 = this.payChannelForm.payChannelName
      this.payChannelForm.payChannelName = str4.split('&')[1]
      this.payChannelForm.payChannelNo = str4.split('&')[0]
      this.payChannelForm.payCompanyNo = str4.split('&')[2]

      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将添加支付通道配置, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogAddPayChannel = false
            addPayChannelConfig(this.payChannelForm).then((response) => {
              if (response.code === '0000') {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 5000
                })
                this.getPayChannelConfigs()
              }
              this.listLoading = false
            })
          })
        } else {
          return false
        }
      })
    },
    handleUpdatePay(row) {
      this.payChannelForm = row
      this.dialogStatus = 'update'
      this.dialogAddPayChannel = true
    },
    updatePayChannelConfig(formName) {
      var str4 = this.payChannelForm.payChannelNameStr
      this.payChannelForm.payChannelName = str4.split('&')[1]
      this.payChannelForm.payChannelNo = str4.split('&')[0]
      this.payChannelForm.payCompanyNo = str4.split('&')[2]
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          updatePayChannelConfig(this.payChannelForm).then(response => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getPayChannelConfigs()
          })
        } else {
          return false
        }
      })
    },
    handleOpen(row) {
      this.payChannelForm = row
      this.payChannelForm.status = '0'
      const set = this.$refs
      set['payChannelForm'].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          updatePayChannelConfig(this.payChannelForm).then(response => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getPayChannelConfigs()
          })
        } else {
          return false
        }
      })
    },
    handleClose(row) {
      this.payChannelForm = row
      this.payChannelForm.status = '1'
      const set = this.$refs
      set['payChannelForm'].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          updatePayChannelConfig(this.payChannelForm).then(response => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getPayChannelConfigs()
          })
        } else {
          return false
        }
      })
    },
    getPayChannelConfigs() {
      this.listQuery4.platformId = this.platformId
      pagePayChannelConfig(this.listQuery4)
        .then(response => {
          console.log('channel---------------------')
          this.payChannelList = response.body.data.rows
          this.total4 = response.body.data.total
        })
    },
    getFeeList() {
      var str = {}
      all(str)
        .then(response => {
          console.log('fee' + response)
          this.feeList = response.data.rows
        }).catch(() => {
          this.lisfeeListt = []
        })
    },
    getPayChannels() {
      var str = {}
      allChannel(str)
        .then(response => {
          console.log(response)
          this.payChannels = response.data.rows
        }).catch(() => {
          this.payChannels = []
        })
    },
    getPlatformExtend() {
      getPlatformExtend(this.platformId)
        .then(response => {
          console.log('---------------------')
          console.log(response.extend)
          if (response.extend !== undefined) {
            this.platformBaseExtend = response.extend
          }
        })
    },
    getCallBackList() {
      this.listQuery2.platformId = this.platformId
      pageCallBackUrl(this.listQuery2)
        .then(response => {
          console.log('回调-----------------------------')
          console.log(response)
          this.callBackList = response.data.rows
          this.total2 = response.data.total
        })
    },
    getSafetyList() {
      this.listQuery1.platformId = this.platformId
      pageSafetyConfig(this.listQuery1)
        .then(response => {
          console.log('安全-----------------------------')
          console.log(response)
          this.safetyList = response.data.rows
          this.total1 = response.data.total
        })
    },
    getPlatformAccList() {
      this.listQueryAccs.platformId = this.platformId
      getPlatformAccs(this.listQueryAccs)
        .then(response => {
          console.log('平台支持的账户列表-----------------------------')
          console.log(response)
          this.platformAccTypeList = response.body.data.rows
          this.totalAccs = response.body.data.total
        })
    },
    getAccountTypeList() {
      var str = {}
      str.type = 'accountType'
      getAccountTypes(str)
        .then(response => {
          console.log('查询系统账户类型列表-----------------------------')
          console.log(response)
          this.dictList = response.dictList
        })
    },
    getPlatformAccountList() {
      var str = {}
      str.platformId = this.platformId
      str.customerType = 'CUST00' // 客户类型为平台（CUST00）
      getPlatformAccounts(str)
        .then(response => {
          console.log('查询平台账户信息-----------------------------')
          console.log(response)
          this.platformAccounts = response.merchantAccounts
        })
    },
    createAccountConfig(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将添加新账户类型, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogAddAccountConfig = false
            this.listLoading = true
            addPlatformAcc(this.platformAccountForm)
              .then((response) => {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 5000
                })
                this.getPlatformAccList()
                this.listLoading = false
              })
          })
        } else {
          return false
        }
      })
    },
    createCallBackUrl(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将添加回调地址, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogAddCallBack = false
            this.listLoading = true
            addCallBackUrl(this.callBackForm).then((response) => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 5000
              })
              this.getCallBackList()
              this.listLoading = false
            })
          })
        } else {
          return false
        }
      })
    },
    createSafetyConfig(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将添加安全配置, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listLoading = true
            addSafetyConfig(this.safetyForm).then((response) => {
              this.dialogAddSafetyConfig = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 5000
              })
              this.getSafetyList()
              this.listLoading = false
            })
          })
        } else {
          return false
        }
      })
    },
    handleUpdateCallBack(row) {
      this.dialogStatus = 'update'
      this.callBackForm = row
      this.dialogAddCallBack = true
    },
    updateCallBackUrl(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogAddCallBack = false
          updateCallBackUrl(this.callBackForm).then(response => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getCallBackList()
          })
        } else {
          return false
        }
      })
    },
    handleUpdateSafety(row) {
      this.dialogStatus = 'update'
      this.safetyForm = row
      this.dialogAddSafetyConfig = true
    },
    updateSafetyConfig(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogAddSafetyConfig = false
          updateSafetyConfig(this.safetyForm).then(response => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.getSafetyList()
          })
        } else {
          return false
        }
      })
    },
    handleDeleteCallBack(row) {
      this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCallBackUrl(row)
            .then(response => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getCallBackList()
            })
        })
    },
    handleDeleteSafety(row) {
      this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteSafetyConfig(row)
            .then(response => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getSafetyList()
            })
        })
    },
    resetForm() {
      this.platformAccountForm = {
        platformId: '',
        customerType: '',
        accountType: '',
        accountAlias: ''
      }
      this.safetyForm = {
        platformId: '',
        encryptionType: '',
        encryptionMethod: '',
        saltKey: '',
        publicKey: '',
        privateKey: ''
      }
      this.callBackForm = {
        platformId: '',
        callbackType: '',
        callbackUrl: ''
      }
      this.payChannelForm = {
        platformId: '',
        payChannelName: '',
        payChannelNameStr: '',
        payChannelNo: '',
        payCompanyNo: '',
        customerType: '',
        outMerNo: '',
        outSubMerNo: '',
        outMerAccount: '',
        outMerPublicKey: '',
        outMerPrivateKey: '',
        encryptionMethod: '',
        keyPath: '',
        keyPwd: '',
        status: '',
        feeCode: ''
      }
    }
  }
}
</script>

<style scoped>
  label {
      margin: 0px 0px !important;
  }
  .el-row {
    margin-bottom: 1px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #e5e9f2;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    font-size: 14px;
    line-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .bg-cust-detail {
    background: #e5e9f2;
    padding-left: 10px;
    margin-bottom: 10px;
  }
  .bg-cust-title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
  }

  .bg-cust-title1 {
    font-weight: bold;
    color: red;
    float: left;
  }
  .bg-cust-addBtn {
    margin-left: 200px;
    margin-bottom: 10px;
  }
  .bg-cust-account {
    background: #e5e9f2;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .bg-mer-fee {
    background: #e5e9f2;
  }
  .bg-mer-add—feeinfo {
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
